<!-- 不合格品统计-->
<template>
	<div style="background-color: #F5F8FF;">
		<div class="searchBgc">
			<div class="serachGo">
				<picker mode="date" @change="startTimePick">
                    <div class="startTime">
                    	<image src="../../../static/zlqx_gx_rq_n_icon.png" style="margin-left: 20px;margin-right:22upx;width: 32upx;height: 32upx;" mode="scaleToFill"></image>
                    	<text class="list-value">{{startTime}}</text>
                    </div>
                </picker>
				<div class="verticalLine"></div>
				<picker mode="date" @change="endTimePick">
				    <div class="startTime">
				    	<image src="../../../static/zlqx_gx_rq_n_icon.png" style="margin-left: 20px;margin-right:22upx;width: 32upx;height: 32upx;" mode="scaleToFill"></image>
				    	<text class="list-value">{{endTime}}</text>
				    </div>
				</picker>
			</div>
			<div class="serachButton" @click="serachButton">
				<image src="../../../static/zzp_ss_icon.png" style="width: 45upx;height: 45upx;" mode="scaleToFill"></image>
			</div>
		</div>
		<div class="unqu-content">
			<div class="processCode">
				<picker @change="processCodePicker" :value="index" :range="processList">
					<div class="processCode-left">
						<text class="processCode-name">{{inter.qxgx}}：</text>
						<text class="list-value" style="width: 120upx;">{{processList[processIndex]}}</text>
						<image  src="../../../static/DMS_gzlr_xzxl_icon.png" style="width: 28upx;height: 20upx;" mode="scaleToFill"></image>
					</div>
				</picker>
				<div class="verticalLine"></div>
				<picker @change="DefectTypePicker" :value="index" :range="DefectType">
					<div class="processCode-right">
						<text class="processCode-name">{{inter.qxplx}}：</text>
						<text class="list-value" style="width: 120upx;">{{DefectType[DefectTypeIndex]}}</text>
						<image  src="../../../static/DMS_gzlr_xzxl_icon.png" style="width: 28upx;height: 20upx;" mode="scaleToFill"></image>
					</div>
				</picker>
			</div>
			<!-- <scroll-view scroll-y class="pieScroll"> -->
			<div class="unqu-content">
				<view class="top10">
					<text style="font-size: 32upx;color:#2F2F2F;">{{inter.top10}}TOP10</text>
				</view>
				<view class="echart">
					<mpvue-echarts :echarts="echarts" :onInit="lineInit" canvasId="line" ref="lineChart" />
				</view>
				<view class="pie-title">
					<view class="pie-line"></view>
					<text class="list-value">TOP{{topNum}}：{{processXarr[topNum-1]}}</text>
				</view>
			<!-- <scroll-view scroll-y class="pieScroll"> -->
				<view class="echart2">
					<mpvue-echarts :echarts="echarts" :onInit="pieInit" canvasId="pie" ref="pieChart" />
				</view>
				<view class="data-list-name">
					<view class="left-line"></view>
					<text style="color: #2F2F2F;font-size: 28upx;font-weight:400;margin-left: 10upx;">{{inter.dataList}}</text>
				</view>
				<view class="list-header">
					<view class="list-cell">
						<text class="cell-top">{{inter.qxm}}</text>
						<text class="cell-bottom">{{inter.sum}}</text>
					</view>
					<view class="list-cell">
						<text class="cell-top">{{inter.quantity}}</text>
						<text class="cell-bottom">{{totalNum}}</text>
					</view>
				</view>
				<view class="list-body" v-for="(item,index) in processXarr" :key="index" :class="[index%2==0?'iswhite':'isgray']">
					<view class="body-cell">
						<text>{{item}}</text>
					</view>
					<view class="body-cell">
						<text>{{processYarr[index]}}</text>
					</view>
				</view>
			</div>
			<!-- </scroll-view> -->
		</div>
	</div>
</template>

<script>
	import * as echarts from '@/components/echarts/echarts.min.js';
	import mpvueEcharts from '@/components/mpvue-echarts/src/echarts.vue';
	import $api from '@/api/api.js'
	import $inter from '@/api/international.js'
	var thatt;
	var lineOption = {
            title: {
            	text: '',
            	x: 'center',
            	textStyle:{
            		color:'#2F2F2F',
            		fontSize:'14',
            		fontFamily:'PingFang-SC-Bold',
            		fontWeight:'bold',
            	}
            },
            tooltip: {
				formatter : function (params) {
						 loadDataa(params)
		        	},
				triggerOn:'click',
			},
			grid: {
			    left: '13%',
			    right: '5%',
				bottom:'15%',
				top:'15%'
			},
            legend: {
            	data:['数量'],
				itemWidth:10,
				itemHeight:10,
            	textStyle:{
            		color:"#2F2F2F",
            		fongSize:'11'
            		},
            	right: 10
            },
            xAxis: {
                data: [],
				splitLine:{show: false},
				axisTick:{
					inside:true
				},
				axisLabel:{
					interval:0,
					formatter: function (value, index) {
						let name = value.substr(0, value.indexOf(':'));
						return name
					}
				}
            },
            yAxis: {
				splitLine:{show: false},
				axisTick:{
					inside:true
				}
				},
            series: {
                name: '数量',
				type: 'bar',
				barCategoryGap:"40%",
				barWidth:'18',
				data: [],
				itemStyle:{
					color: {
					            type: 'linear',
					            x: 0,
					            y: 0,
					            x2: 0,
					            y2: 1,
					            colorStops: [{
					                offset: 0, color: 'rgba(6,201,237,1)' // 0% 处的颜色
					            }, {
					                offset: 1, color: 'rgba(16,127,210,1)' // 100% 处的颜色
					            }],
					            global: false // 缺省为 false
					        }
				},
            }
        };
	
	var pieOption = {
	color:['#4A90E2','#7BB8FF', '#BEDCFF', '#36B9BB', '#85E0E1','#ADE1E2',  '#A1D666', '#C6E6A3','#8E5DB3', '#B493CD'],
    tooltip : {
        trigger: 'item',
    },
    series : 
        {
            name: '轮型',
            type: 'pie',
            radius : ['0', '50%'],
			minAngle:9,
            center: ['50%', '50%'],
            data:[],
			label:{
// 				 normal: {
// 					 formatter: "{b} \n {d}%"
// 				 }
			},
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    
};
	
	function getProcess(that){
		uni.showToast({
			title: 'loading',
			icon:'loading',
			mask:true,
		});
		$api.getAll("",res=>{
			res.forEach((item)=>{
				that.processList.push(item.Name)
				that.processCode.push(item.Code)
			})
			getDefectType(that)
			uni.hideToast()
		},err=>{
			uni.showToast({
				title:that.inter.sjjzsb,
				icon:'none',
				mask:true
			})
			console.log("222"+JSON.stringify(err));
		},e=>{
			
		})
	}
	
	function getDefectType(that){
		uni.showToast({
			title: 'loading',
			icon:'loading',
			mask:true,
		});
		$api.getDefectType("",res=>{
			res.forEach((item)=>{
				that.DefectType.push(item.Name)
				that.DefectTypeCode.push(item.Code)
			})
			getDefectQty(that)
			uni.hideToast()
		},err=>{
			uni.showToast({
				title:that.inter.sjjzsb,
				icon:'none',
				mask:true
			})
			console.log("222"+JSON.stringify(err));
		},e=>{
			
		})
	}
	
	function getDefectQty(that){
		uni.showToast({
			title: 'loading',
			icon:'loading',
			mask:true,
		});
		$api.getDefectQty({
			StartDate:that.startTime,
			EndDate:that.endTime,
			ProcessCode:that.processCode[that.processIndex],
			DefectType:that.DefectTypeCode[that.DefectTypeIndex]
			},res=>{
					console.log("111"+JSON.stringify(res));
		 			processData(res,that)
					uni.hideToast()
				},err=>{
					uni.showToast({
						title:that.inter.sjjzsb,
						icon:'none',
						mask:true
					})
					console.log("222"+JSON.stringify(err));
				},e=>{
					
				})
	}
	
	function processData(res,that){
		that.processXarr=[];
		that.processYarr=[];
		that.DefectTypeXarr=[];
		that.DefectTypeYarr=[];
		 let data = res.Table1
		 let data2= res.Table2?res.Table2:[]
		 data.forEach((item)=>{
			 that.processXarr.push(item.缺陷码)
			 that.processYarr.push(item.数量)
			 that.DefectCode.push(item.缺陷码.substr(0, item.缺陷码.indexOf(':')))
		 })
		 let totalNum = 0;
		 if(that.processYarr.length>0){
			  totalNum = that.processYarr.reduce((preValue, curValue) => 
			 	preValue + curValue
			 )
		 }
		 that.totalNum=totalNum
		console.log(that.DefectCode)
		 lineOption.title.text = that.inter.sum+"："+totalNum;
		 lineOption.legend.data = [that.inter.quantity];
		 lineOption.series.name = that.inter.quantity;
		 lineOption.xAxis.data = that.processXarr;
		 lineOption.series.data = that.processYarr;
		 that.$refs.lineChart.init();
		 
		 data2.forEach((item)=>{
		 			 that.DefectTypeXarr.push(item.轮型);
		 			 let obj={};
					 obj.value=item.数量;
					 obj.name=item.轮型;
					 that.DefectTypeYarr.push(obj)
		 })
		 pieOption.series.data=that.DefectTypeYarr;
		 pieOption.series.name=that.inter.wheelModel;
		 that.$refs.pieChart.init();
	}
	
	function loadDataa(params){
		thatt.topNum=params.dataIndex+1
		getDefectPie(params.dataIndex)
	}
	
	function getDefectPie(n){
		uni.showToast({
			title: 'loading',
			icon:'loading',
			mask:true,
		});
		$api.getDefectPie({
			StartDate:thatt.startTime,
			EndDate:thatt.endTime,
			DefectCode:thatt.DefectCode[n]
			},res=>{
				console.log("222"+JSON.stringify(res));
				loadPie(res)
				uni.hideToast()
			},err=>{
				uni.showToast({
					title:thatt.inter.sjjzsb,
					icon:'none',
					mask:true
				})
				console.log("222"+JSON.stringify(err));
			},e=>{
				
			})
	}
	
	function loadPie(res){
		thatt.DefectTypeXarr=[];
		thatt.DefectTypeYarr=[];
		res.forEach((item)=>{
					 thatt.DefectTypeXarr.push(item.col0);
					 let obj={};
							 obj.value=item.col1;
							 obj.name=item.col0;
							 thatt.DefectTypeYarr.push(obj)
		})
		pieOption.series.data=thatt.DefectTypeYarr;
		pieOption.series.name=thatt.inter.wheelModel;
		thatt.$refs.pieChart.init();
	}
	
	export default {
		components: {mpvueEcharts },
		data(){
			return{
				echarts: echarts,
				languageValue:'',
				startTime:"2019-03-01",
				endTime:"2019-03-29",
				processList:[],
				processCode:[""],
				processIndex:0,
				DefectType:[],
				DefectTypeCode:[""],
				DefectTypeIndex:0,
				processXarr:[],
				processYarr:[],
				DefectTypeXarr:[],
				DefectTypeYarr:[],
				DefectCode:[],
				totalNum:0,
				topNum:1
				
			}
		},
		onLoad(){
			this.startTime = $api.getLastMonthDate()
 			this.endTime = $api.getNowFormatDate()
			thatt=this
			uni.getStorage({
				key:'languageValue',
				success:(res)=>{
					this.languageValue = res.data
					uni.setNavigationBarTitle({
						title: this.inter.bhgptj
					});
				}
			})
			this.processList.push(this.inter.all)
			this.DefectType.push(this.inter.all)
			getProcess(this)
		},
		onUnload:function(){  
			pieOption.series.data=[];
			this.$refs.pieChart.init();
			lineOption.xAxis.data =[];
			lineOption.series.data = [];
			this.$refs.lineChart.init();
			
		},
		methods:{
			startTimePick(e){
				this.startTime = e.target.value
			},
			endTimePick(e){
				this.endTime = e.target.value
			},
			processCodePicker(e){
				this.processIndex=e.target.value
				getDefectQty(this)
				console.log(this.processIndex)
			},
			DefectTypePicker(e){
				this.DefectTypeIndex=e.target.value
				getDefectQty(this)
			},
			serachButton(){
				getDefectQty(this)
			},
			lineInit(canvas, width, height) {
				let lineChart = echarts.init(canvas, null, {
					width: width,
					height: height
				})
				canvas.setChart(lineChart)
				lineChart.setOption(lineOption)
				return lineChart
			},
			pieInit(canvas, width, height) {
				let pieChart = echarts.init(canvas, null, {
					width: width,
					height: height
				})
				canvas.setChart(pieChart)
				pieChart.setOption(pieOption)
				return pieChart
			}
		},
		computed:{
			inter(){
				console.log("1111111"+this.languageValue);
				if (this.languageValue == '简体中文') {
					return $inter.producting.charts
				} else{
					return $inter.producting.charts
				}
			}
		}
	}
</script>

<style>
	.searchBgc{
		/* width: 100vw; */
		height: 110upx;
		background-color: #0C9CDC; /* Safari 5.1 - 6.0 */
		display: flex;
		flex-direction: row;
		justify-content: center;
		padding-top: 15upx;
	}
	.unqu-content{
		width: 750upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #F5F8FF;
	}
	.serachGo{
		width:636upx;
		height: 64upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		border-radius: 8upx;
		background-color: #FFFFFF;
	}
	.startTime{
		width: 315upx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.processCode-left{
		width: 340upx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.processCode-right{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.verticalLine{
		width: 2upx;
		height: 45upx;
		background-color: #9B9B9B;
	}
	.serachButton{
		height: 64upx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 15upx;
	}
	.list-value{
		font-size: 28upx;
		color: #2F2F2F;		
	}
	.top10{
		height: 45upx;
		display: flex;
	}
	.processCode{
		width: 700upx;
		height: 68upx;
		display: flex;
		border:2upx solid rgba(36,150,247,1);
		margin-top: 22upx;
		margin-bottom: 20upx;
		flex-direction: row;
		align-items: center;
		border-radius: 8upx;
		background-color: #F5F8FF;
	}
	.processCode-name{
		font-size: 28upx;
		color: #4A86C6;
		margin-left: 26upx;
	}
	.echart{
		width: 100%;
		height: 410upx;
		background-color: #F5F8FF;
	}
	.echart2{
		width: 100%;
		height: 510upx;
		background-color: #F5F8FF;
	}
	.pie-title{
		width: 700upx;
		height: 50upx;
		display: flex;
		align-items: center;
	}
	.pie-line{
		width: 5upx;
		height: 26upx;
		background: rgba(12,156,220,1);
		margin-right: 10upx;
	}
	.pieScroll{
		height: calc(100vh - 235upx);
	}
	.left-line{
		width: 5upx;
		height: 26upx;
		background: #0C9CDC;
	}
	.data-list-name{
		display: flex;
		align-items: center;
		height: 90upx;
		width: 700upx;
	}
	.list-header{
		width: 700upx;
		height:96upx;
		background:rgba(225,246,255,1);
		display: flex;
	}
	.list-cell{
		width: 350upx;
		height: 96upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.list-body{
		width:700upx;
		height:48upx;
		display: flex;
	}
	.body-cell{
		width: 350upx;
		height: 48upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #5D5D5D;
		font-size: 24upx;
	}
	.cell-top{
		color: #2F2F2F;
		font-size: 26upx;
		font-weight:400;
	}
	.cell-bottom{
		color: #0C9CDC;
		font-size: 24upx;
		font-weight:400;
	}
	.iswhite{
		background: #FFFFFF;
	}
	.isgray{
		background: #F6F6F6;
	}
</style>
